<template>
	<view class="zg-area">
		<view class="area-1" v-if="Object.keys(details2).length > 0" @click="goRouter1">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view>
						<view class="tp-fc333">
							<text>{{details2.name || ''}}</text>
							<text>{{details2.phone || ''}}</text>
						</view>
						<view class="tp-fc666">
							<text>{{details2.province || ''}}{{details2.city || ''}}{{details2.area || ''}}</text>
						</view>
						<view class="tp-fc666">
							<text>{{details2.address || ''}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="area-1" v-else @click="goRouter2">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view>请添加收货地址</view>
				</view>
			</view>
			<view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="area-2">
			<view class="area-2-card">
				<view class="a2c-title">
					<image src="../static/shop.png" mode="widthFix"></image>
					<text class="tp-fz28">{{details.scName || ''}}</text>
				</view>
				<view class="a2c-content">
					<view class="a2c-img">
						<image :src="`${shopImgUrl}${details.pic}`" style="border-radius: 12rpx;" mode="aspectFill"></image>
					</view>
					<view class="a2c-info">
						<view class="a2c-info-title">
							{{details.name || ''}}
						</view>
						<view class="a2c-info1 ">
							<text class="tp-fz24">{{specification.ggzh}}</text>
						</view>
						<view class="a2c-info2">
							<view class="a2c-info-price">
								<text class="tp-fz24">￥</text>
								<text class="tp-fz36">{{price || 0}}</text>
							</view>
							<view class="a2c-info-num tp-fz28">
								<text>x{{specification.quantity || 1}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="area-2-row">
				<view class=" tp-fz28">
					运费
				</view>
				<view class="a2r-right">
					<text class="tp-fz28">{{details.postage || 0}}元</text>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left tp-fz28">
					合计
				</view>
				<view class="a2r-right">
					<text class="a2r-price tp-fz28">￥{{totalMoney || 0}}</text>
				</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom">
			<view class="ftb-l">
				<text>合计：</text>
				<text class="ftb-price ">￥{{totalMoney || 0}}</text>
			</view>
			<view class="ftb-r">
				<button plain @click="createOrder">提交订单</button>
			</view>
		</view>
		<CommonPaySecond ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @cancle="noPay" @closeK="noPay" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				cid: '',  // 商品id
				specification: {}, // 商品属性
				details: {}, // 商品详情
				details2: {}, // 默认地址
				price: '',
				oid:'',//订单号
				createOrderid:'',
			}
		},
		computed:{
			totalMoney() {
				return (this.trunNumber(this.price) * this.trunNumber(this.specification.quantity) + this.trunNumber(this.details.postage)).toFixed(2);
			},
			orderInfo() {
				let o = {
					orderNo: this.oid,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		onReady() {
			// 去添加地址
			uni.$on('add-address',data => {
				this.details2 = data
			})
			// 去选择地址
			uni.$on('select-address',data => {
				// console.log(data);
				this.details2 = data
			})
		},
		onLoad(params) {
			console.log(params);
			this.cid = params.cid // 商品id
			this.price = params.price // 商品价格
			try {
				this.specification = JSON.parse(params.specification) // 商品属性
			} catch(e) {
				console.error("商品数据错误");
			}
			this.getDetails1()
			this.getDetails2()
		},
		methods:{
			// 根据商品id查询商品详情
			getDetails1() {
				this.$http.post(this.$api.shop_details_1, {}, {
					params: {
						id: this.cid,
					}
				}).then(result => {
					if (result.code === 200) {
						this.details = result.data;
					} else {
						this.details = {}
					}
				}).catch(() => {
					this.details = {}
				})
			},
			// 获取默认收货地址
			getDetails2() {
				this.$http.post(this.$api.shop_order_6).then(result => {
					if (result.code === 200) {
						this.details2 = result.data
					} else {
						this.details2 = {}
					}
				}).catch(() => {
					this.details2 = {}
				})
			},
			// 发起团购
			createOrder() {
				
				if(!this.details2.id) {
					uni.showToast({
						title:'缺少收获地址',
						icon:'none'
					})
					return
				}
				const _this = this
				this.$http.post(this.$api.shop_order_8, {
					productId: this.cid, // 商品ID
					skuId: this.specification.skuId, // 规格型号id
					productQuantity: this.specification.quantity, // 购买数量
					addressId: this.details2.id, // 地址id
				}).then(result => {
					if (result.code === 200) {
						this.oid = result.data.orderNs
						this.createOrderid = result.data.id
						_this.$refs.commonPay.show()
						
					} else {
						uni.showToast({
							title: result.msg,
							icon:'none'
						})
					}
				})
			},
			// 积分支付成功
			payMoney(pwd) {
				// #ifdef MP-WEIXIN
				let url = this.$api.shop_order_7 + '?orderNo=' + this.oid + '&payType=0&sourceType=0&payPassword=' + pwd
				// #endif
				// #ifdef H5
				let url = this.$api.shop_order_7 + '?orderNo=' + this.oid + '&payType=0&sourceType=2&payPassword=' + pwd
				// #endif
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(url).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.redirectTo({
								url: `./tg_wait_order?oid=${this.oid}&id=${this.createOrderid}`
							});
						},600)
					} else {
						uni.showToast({
							title:'支付失败',
							icon: 'none'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: './jifenOrderDetail?id=' + this.orderId
					});
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none',
					mask: true,
				})
				 setTimeout(() => {
					uni.redirectTo({
						url: `./tg_wait_order?oid=${this.oid}&id=${this.createOrderid}`
					})
				},600) 
			},
			// 选择地址
			goRouter1() {
				uni.navigateTo({
					url:'/pagesUser/addressList'
				})
			},
			// 添加地址
			goRouter2() {
				uni.navigateTo({
					url:'/pagesUser/addressEdit'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay-content {
		background-color: #fff;
		border-radius: 10rpx;
		width: 660rpx;
	}
	
	.pay-title {
		padding: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		view {
			flex-shrink: 0;
			width: 40rpx;
		}
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.pay-row1 {
		text-align: center;
		color: $uni-color-error;
		font-size: 50rpx;
		padding: 50rpx;
	}
	
	.pay-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}
	
	.pr2-left {
		display: flex;
		align-items: center;
		
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
	
	.pr2-right {
		display: flex;
		align-items: center;
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}
	
	.pay-row3 {
		padding: 60rpx 30rpx;
		
		button {
			background-color: $blue;
			color: #fff;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}
	
	.area-1 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.area-1-left {
		display: flex;
		align-items: center;
		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}
	
	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			&:nth-of-type(1) {
				font-size: 28rpx;
				text {
					margin-right: 26rpx;
				}
			}
			
			&:nth-last-of-type(1) {
				margin-bottom: 0
			}
		}
	}
	
	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;
		
		image {
			width: 14rpx;
			height: auto;
		}
	}
	
	.area-2 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}
	
	.area-2-card {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}
	
	.a2c-title {
		display: flex;
		align-items: center;
		color: #666;
		margin-bottom: 30rpx;
		
		image {
			width: 30rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}
	
	.a2c-content {
		display: flex;
	}
	
	.a2c-img {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
	
	.a2c-info {
		flex-grow: 1;
	}
	
	.a2c-info-title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.a2c-info1 {
		margin-bottom: 10rpx;
		color: #999;
		
		text {
			margin-right: 10rpx;
		}
	}
	
	.a2c-info2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.a2c-info-price {
		color: $uni-color-error;
		font-weight: bold;
		font-size: 30rpx;
	}
	
	.area-2-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 0;
	}
	
	.a2r-left {
	}
	
	.a2r-right {
		display: flex;
		align-items: center;
		
		image {
			width: 14rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}
	
	.a2r-tip {
		color: #999;
	}
	
	.a2r-price {
		color: $uni-color-error;
		
	}
	
	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	
	.ftb-l {
		display: flex;
		align-items: center;
	
		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}
	
	.ftb-price {
		color: $uni-color-error;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	
		button {
			background-color: #FFAF3C;
			color: #fff;
			font-size: 26rpx;
			padding: 20rpx 60rpx;
			border-radius: 10rpx;
		}
	}
</style>
